<template>
  <div class='app'>
    <div class="stick" :style="{ background: 'rgb(' + color[0].R + ',' + color[0].G + ',' + color[0].B + ')' }">
      {{ color[0] }}
      <h1>我是父组建件盒子-我里面引用了子组件</h1>
      <Son :obj="data" @onColor="newColor">
        <template v-slot:two='color'>
          {{ color.color }}
          {{ color.color.R }},{{ color.color.G }},{{ color.color.B }}
          <p :style="{ color: 'rgb(' + color.color.R + ',' + color.color.G + ',' + color.color.B + ')' }">
            {{ color.color.R }},{{ color.color.G }},{{ color.color.B }}

            asdgfsergse
          </p>
        </template>
      </Son>
    </div>
  </div>
</template>

<script>
import Son from '@/components/Son'
export default {
  name: 'app',
  /**
  * 定义组件的data函数，用于声明组件内部的状态。
  * 
  * @returns {Object} 返回一个对象，其中包含组件内部的状态。这些状态将在组件的生命周期内被管理和使用。
  */
  data() {
    return {
      data: 'dfsgsdfgsdf',
      color: [
        {
          R: 0,
          G: 0,
          B: 0
        }
      ]
    }
  },

  components: {
    Son,
  },
  methods: {
    newColor(val) {
      console.log('参数：', val);
      this.color[0] = `{R:${val.R},G:${val.G},B:${val.B}};`
      console.log('color', this.color[0]);
    }
  }
}
</script>

<style scoped>
.stick {
  width: 450px;
  height: 500px;
  padding: 20px;
  margin: 20px;
  color: #fff;
}
</style>